<!--
  Home.vue - 系统主页组件
  功能：
  1. 提供系统概述和介绍
  2. 展示主要功能特点
  3. 提供快速入门指南
-->
<template>
  <div class="home-container" style=" padding-bottom: 100px;">
    <!-- 顶部横幅 -->
    <div class="hero-section">
      <h1>欢迎使用AI助手系统</h1>
      <p class="subtitle">强大的AI驱动分析工具，助力您的决策过程</p>
    </div>

    <!-- 主要功能卡片 -->
    <el-row :gutter="20" class="feature-section">
      <el-col :span="8">
        <el-card class="feature-card">
          <template #header>
            <div class="card-header">
              <el-icon><ChatDotRound /></el-icon>
              <span>智能对话</span>
            </div>
          </template>
          <div class="card-content">
            <p>通过自然语言与AI助手进行交互，获取专业的分析建议和解答</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="feature-card">
          <template #header>
            <div class="card-header">
              <el-icon><Position /></el-icon>
              <span>数据分析</span>
            </div>
          </template>
          <div class="card-content">
            <p>强大的数据处理能力，为您提供深入的数据分析和可视化展示</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="feature-card">
          <template #header>
            <div class="card-header">
              <el-icon><Service /></el-icon>
              <span>智能服务</span>
            </div>
          </template>
          <div class="card-content">
            <p>提供多样化的智能服务，满足您的各类分析需求</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快速入门指南 -->
    <div class="guide-section">
      <h2>快速入门指南</h2>
      <el-steps :active="1" finish-status="success">
        <el-step title="开始使用" description="点击导航栏中的AIChat 开始对话" />
        <el-step title="提出问题" description="输入您的问题或分析需求" />
        <el-step title="获取结果" description="系统将为您提供专业的分析和建议" />
      </el-steps>
    </div>

    <!-- 开始使用按钮 -->
    <div class="action-section">
      <el-button type="primary" size="large" @click="$router.push('/xai')">
        立即开始使用
        <el-icon class="el-icon--right"><ChatLineRound /></el-icon>
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { defineOptions } from 'vue'
import { ChatDotRound, ChatLineRound, Service, Position } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

defineOptions({
  name: 'Home'
})

const router = useRouter()
</script>

<style lang="scss" scoped>
.home-container {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.hero-section {
  text-align: center;
  padding: 3rem 0;
  background: linear-gradient(135deg, #409eff11 0%, #409eff22 100%);
  border-radius: 12px;
  margin-bottom: 3rem;

  h1 {
    font-size: 2.5rem;
    color: #303133;
    margin-bottom: 1rem;
  }

  .subtitle {
    font-size: 1.2rem;
    color: #606266;
  }
}

.feature-section {
  margin-bottom: 3rem;
}

.feature-card {
  height: 100%;
  transition: transform 0.3s ease;

  &:hover {
    transform: translateY(-5px);
  }

  .card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.2rem;
    font-weight: bold;
  }

  .card-content {
    color: #606266;
    line-height: 1.6;
  }
}

.guide-section {
  margin-bottom: 3rem;
  padding: 2rem;
  background-color: #f5f7fa;
  border-radius: 12px;

  h2 {
    text-align: center;
    margin-bottom: 2rem;
    color: #303133;
  }
}

.action-section {
  text-align: center;
  margin-bottom: 2rem;

  .el-button {
    padding: 12px 30px;
    font-size: 1.1rem;
  }
}

:deep(.el-card) {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

:deep(.el-steps) {
  max-width: 800px;
  margin: 0 auto;
}
</style>
